<template>
  <div class="line-container">
    <ve-line :data="chartData" :extend="extend"></ve-line>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据
export default {
  data() {
    this.extend = {
      color: ["#4ebaff", "#b851ff"],
      xAxis: {},
      yAxis: {
        show: true,
        //刻度
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: "solid",
            color: "#ccc",
            width: "1"
          }
        }
      },
      tooltip:{
        backgroundColor:'#fff',
        textStyle:{
          color:"#000"
        },
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);'
      },
      series: {
        symbolSize: 15,
        areaStyle: {
          x: 0,
          y: 0.5,
          x2: 0,
          y2: 1,
          origin: "start",
          opacity: 0.09
        },
        label:{
          show:true
        }
      }
    };
    return {
      chartData: {
        columns: ["日期", "访问用户",],
        rows: [
          { 日期: "1/1", 访问用户: 1393},
          { 日期: "1/2", 访问用户: 3530},
          { 日期: "1/3", 访问用户: 2923},
          { 日期: "1/4", 访问用户: 1723},
          { 日期: "1/5", 访问用户: 3792},
          { 日期: "1/6", 访问用户: 6593},
          { 日期: "1/7", 访问用户: 2593},
          { 日期: "1/8", 访问用户: 1593},
        ]
      }
    };
  }
};
</script>


<style lang="scss" scoped>
.line-container {
  padding-top: 20px;
  width: 100%;
}
</style>
